<template>
    <div class="table">
        <div class="divSearch">
            <!--搜索框-->
            <Row>
                <Col :lg="{span:5}" :md="{span:8}" :sm="{span:12}" :xs="{span:16}">
                <label class="searchLabel">填报年度:</label>
                <Select v-model="searchModel.FillInYear" placeholder="全部" :label-in-value="true" @on-change="GetData()" class="searchInput">
                    <Option :value="item.DictText" v-for="item in CreateYearList" :key="item.DictValue">{{item.DictText}}</Option>
                </Select>
                </Col>
                <Col :lg="{span:2}" :md="{span:4}" :sm="{span:2}" :xs="{span:2}">
                <Button icon="ios-search" type="primary" @click="GetData()" class="searchButton" v-show="isFull">查询</Button>
                </Col>
                <Col :lg="{span:2}" :md="{span:4}" :sm="{span:2}" :xs="{span:2}" style="float:right">
                    <Button v-show="DataModel.ReportStatus>1" icon="ios-download" type="primary" @click="ExcelDown()" class="searchButton">数据导出</Button>
                </Col> 
                <Col :lg="{span:2}" :md="{span:4}" :sm="{span:2}" :xs="{span:2}" style="float:right" v-show="DataModel.ReportStatus<3&&isFull">
                    <Upload :on-success="handleSuccess" :action="GetPostUrl()">
                        <Button type="primary" icon="ios-cloud-upload-outline" class="searchButton">数据导入</Button>
                    </Upload>
                </Col>
                <Col :lg="{span:2}" :md="{span:4}" :sm="{span:2}" :xs="{span:2}"  style="float:right">
                    <Button icon="ios-cloud-download" type="primary" @click="TmpDown()" class="searchButton">模板下载</Button>
                </Col>
            </Row>
        </div>
        <!-- <Row>
            <Col>
                <Form ref="DataModel" :model="DataModel" :rules="ruleModel" >  
                    <table class="reportTable">
                        <caption>
                            <label style="float:left">{{searchModel.FillInYear}}蔬菜基本情况调查表</label>
                            <label style="float:right">当前状态:
                                <span v-if="DataModel.ReportStatus==0" class="Error">退回重报</span> 
                                <span v-else-if="DataModel.ReportStatus==1" class="NoReport">未填写</span>
                                <span v-else-if="DataModel.ReportStatus==2" class="AlreadyReport">已填写</span>
                                <span v-else-if="DataModel.ReportStatus==3" class="UpReport">已上报</span>
                                <span v-else-if="DataModel.ReportStatus==4" class="Success">审核通过</span>               
                            </label>
                        </caption>
                        <thead>
                            <tr>
                                <td rowspan="2">菜地占地面积(亩)</td>
                                <td rowspan="2">常年蔬菜占地面积(亩)</td>
                                <td colspan="3">季节性面积(亩)</td>
                                <td rowspan="2">水生蔬菜面积(亩)</td>
                                <td rowspan="2">设施蔬菜面积(亩)</td>
                            </tr>
                            <tr>
                                <td>总面积(亩)</td>
                                <td>冬春季蔬菜面积(亩)</td>
                                <td>夏秋季蔬菜面积(亩)</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="disableTd">
                                    <Poptip trigger="focus" title="上年数据" :content="DataModel.OldVegArea">                                         
                                        <Input v-model="DataModel.VegArea=VegArea" disabled  readonly></Input>
                                    </Poptip> 
                                </td>
                                <td>
                                    <Poptip trigger="focus" title="上年数据" :content="DataModel.OldPerennialArea">
                                        <Form-item prop="PerennialArea">
                                            <Input v-model="DataModel.PerennialArea"></Input>
                                        </Form-item>
                                    </Poptip> 
                                </td>
                                <td class="disableTd">
                                    <Poptip trigger="focus" title="上年数据" :content="DataModel.OldSeasonArea">
                                        <Form-item prop="SeasonArea" >
                                            <Input v-model="DataModel.SeasonArea=SeasonArea" disabled readonly></Input>
                                        </Form-item>
                                    </Poptip> 
                                </td>
                                <td>
                                    <Poptip trigger="focus" title="上年数据" :content="DataModel.OldWSArea">
                                        <Form-item prop="WSArea">
                                            <Input v-model="DataModel.WSArea"></Input>
                                        </Form-item>
                                    </Poptip> 
                                </td>
                                <td>
                                    <Poptip trigger="focus" title="上年数据" :content="DataModel.OldSFArea">
                                        <Form-item prop="SFArea">
                                            <Input v-model="DataModel.SFArea"></Input>
                                        </Form-item>
                                    </Poptip> 
                                </td>
                                <td>
                                    <Poptip trigger="focus" title="上年数据" :content="DataModel.OldLiquidArea">
                                        <Form-item prop="LiquidArea">
                                            <Input v-model="DataModel.LiquidArea"></Input>
                                        </Form-item>
                                    </Poptip>                                
                                </td>
                                <td>
                                    <Poptip trigger="focus" title="上年数据" :content="DataModel.OldFacilityArea">
                                        <Form-item prop="FacilityArea">
                                            <Input v-model="DataModel.FacilityArea"></Input>
                                        </Form-item>
                                    </Poptip>
                                </td>
                            </tr>
                        </tbody>       
                    </table>
                </Form>
                
                <div class="divButton">
                    <Button type="primary" @click="save('DataModel')" :disabled="DataModel.ReportStatus < 3 && BtnSaveStatus ? false:true">保存</Button>
                    <Button type="primary" @click="DataUp(DataModel.ReportId)" :disabled="DataModel.ReportStatus == 2 ? false:true">上报</Button>
                </div>
                <Alert class="alert" banner type="warning">
                    填报说明: 
                    <p>填报时间：每年1月10日</p>
                    <p>1.全省范围内从乡（镇）起，逐级全面统计，由县级填报经州（市）审核后上报。 </p>
                    <p>2.平衡关系：<span class="alertTip">蔬菜占地面积=常年蔬菜占地面积+夏秋蔬菜占地面积+冬春蔬菜占地面积，均不含复种指数，指种植蔬菜的土地面积；蔬菜占地面积≤蔬菜年播种面积。</span></p>
                    <p>3.菜地喷滴灌面积，指固定的喷灌以及可移动性的滴灌使用面积。</p>
                    <span slot="desc"></span>
                </Alert>
                
            </Col>
        </Row> -->
         <Row>
            <Col>
                <div v-if="isFull">
                    <Form ref="DataModel" :model="DataModel" :rules="ruleModel" >  
                        <table class="reportTable">
                            <caption>
                                <label style="float:left">
                                    (一){{searchModel.FillInYear}}蔬菜用地情况调查表(全面统计)——<span class="Tip">单位(亩)</span>
                                </label>
                                <label style="float:right">当前状态:
                                    <span v-if="DataModel.ReportStatus==0" class="Error">退回重报</span> 
                                    <span v-else-if="DataModel.ReportStatus==1" class="NoReport">未填写</span>
                                    <span v-else-if="DataModel.ReportStatus==2" class="AlreadyReport">已填写</span>
                                    <span v-else-if="DataModel.ReportStatus==3" class="UpReport">已上报</span>
                                    <span v-else-if="DataModel.ReportStatus==4" class="Success">审核通过</span>               
                                    <span v-else class="NoReport">无需填报</span>               
                                </label>
                            </caption>
                            <thead>
                                <tr>
                                    <td rowspan="2">菜地占地面积</td>
                                    <td colspan="3">其中</td>
                                    <!-- <td rowspan="2">常年蔬菜占地面积(亩)</td>
                                    <td colspan="3">季节性面积(亩)</td> -->
                                    <td rowspan="2">菜地喷滴灌<br/>面积</td>
                                    <!-- <td rowspan="2">上年<br/>同期数</td> -->
                                    <td rowspan="2">水生蔬菜<br/>面积</td>
                                    <td rowspan="2">备注</td>
                                    <!-- <td rowspan="2">上年<br/>同期数</td> -->
                                    <!-- <td rowspan="2">备注</td> -->
                                </tr>
                                <tr>
                                    <td>常年蔬菜<br/>占地面积</td>
                                    <!-- <td>上年<br/>同期数</td> -->
                                    <td>夏秋季蔬菜<br/>占地面积</td>
                                    <!-- <td>上年<br/>同期数</td> -->
                                    <td>冬春季蔬菜<br/>占地面积</td>
                                    <!-- <td>上年<br/>同期数</td> -->
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="disableTd">
                                        <Poptip trigger="focus" >                                       
                                            <Input v-model="DataModel.VegArea=VegArea" disabled  readonly></Input> 
                                            <span slot="content">
                                                上年数据:{{this.OldVegArea==null||""?"暂无":this.OldVegArea}}
                                                ——
                                                增减比:{{getScale(this.OldVegArea,DataModel.VegArea)}}
                                            </span>
                                        </Poptip>
                                    </td>
                                    <td>
                                        <Poptip trigger="focus" >
                                            <Form-item prop="PerennialArea">
                                                <Input v-model="DataModel.PerennialArea"  placeholder="请输入常年蔬菜占地面积"></Input>
                                            </Form-item>
                                            <span slot="content">
                                                上年数据:{{DataModel.OldPerennialArea==null||""?"暂无":DataModel.OldPerennialArea}}
                                                ——
                                                增减比:{{getScale(DataModel.OldPerennialArea,DataModel.PerennialArea)}}
                                            </span>
                                        </Poptip>
                                    </td>
                                    <!-- <td class="disableTd"><Input v-model="DataModel.OldPerennialArea" disabled  readonly></Input></td> -->
                                    <td>
                                        <Poptip trigger="focus" >
                                            <Form-item prop="SFArea">
                                                <Input v-model="DataModel.SFArea" placeholder="请输入夏秋季蔬菜占地面积"></Input>
                                            </Form-item>
                                            <span slot="content">
                                                上年数据:{{DataModel.OldSFArea==null||""?"暂无":DataModel.OldSFArea}}
                                                ——
                                                增减比:{{getScale(DataModel.OldSFArea,DataModel.SFArea)}}
                                            </span>
                                        </Poptip>
                                    </td>
                                    <!-- <td class="disableTd"><Input v-model="DataModel.OldSFArea" disabled  readonly></Input></td> -->
                                    <td>
                                        <Poptip trigger="focus" >
                                            <Form-item prop="WSArea">
                                                <Input v-model="DataModel.WSArea" placeholder="请输入冬春季蔬菜占地面积"></Input>
                                            </Form-item>
                                            <span slot="content">
                                                上年数据:{{DataModel.OldWSArea==null||""?"暂无":DataModel.OldWSArea}}
                                                ——
                                                增减比:{{getScale(DataModel.OldWSArea,DataModel.WSArea)}}
                                            </span>
                                        </Poptip>
                                    </td>
                                    <!-- <td class="disableTd"><Input v-model="DataModel.OldWSArea" disabled  readonly></Input></td> -->
                                    <td>
                                        <Poptip trigger="focus" >
                                            <Form-item prop="FacilityArea">
                                                <Input v-model="DataModel.FacilityArea" placeholder="请输入菜地喷滴灌蔬菜占地面积"></Input>
                                            </Form-item>
                                            <span slot="content">
                                                上年数据:{{DataModel.OldFacilityArea==null||""?"暂无":DataModel.OldFacilityArea}}
                                                ——
                                                增减比:{{getScale(DataModel.OldFacilityArea,DataModel.FacilityArea)}}
                                            </span>
                                        </Poptip>
                                    </td>
                                    <!-- <td class="disableTd"><Input v-model="DataModel.OldFacilityArea" disabled  readonly></Input></td> -->
                                    <td>
                                        <Poptip trigger="focus" >
                                            <Form-item prop="LiquidArea">
                                                <Input v-model="DataModel.LiquidArea"  placeholder="请输入水生蔬菜占地面积"></Input>
                                            </Form-item>
                                            <span slot="content">
                                                上年数据:{{DataModel.OldLiquidArea==null||""?"暂无":DataModel.OldLiquidArea}}
                                                ——
                                                增减比:{{getScale(DataModel.OldLiquidArea,DataModel.LiquidArea)}}
                                            </span>
                                        </Poptip>
                                    </td>
                                    <td>
                                        <Form-item prop="Remark">
                                            <Input v-model="DataModel.Remark"  placeholder="请输入备注"></Input>
                                        </Form-item>
                                    </td>
                                    <!-- <td class="disableTd"><Input v-model="DataModel.OldLiquidArea" disabled  readonly></Input></td> -->
                                    <!-- <td>备注</td> -->
                                </tr>
                            </tbody>       
                        </table>
                    </Form>
                    
                    <div class="divButton">
                        <Button type="primary" @click="save('DataModel')" :disabled="DataModel.ReportStatus < 3 && BtnSaveStatus ? false:true">保存</Button>
                        <Button type="primary" @click="DataUp(DataModel.ReportId)" :disabled="DataModel.ReportStatus == 2 ? false:true">上报</Button>
                    </div>
                </div>
                <div class="FIllTip" v-else>温馨提示:本时段不在系统报表填报时间内，请耐心等待。</div>
                <Alert class="alert" banner type="error">
                    <p>填报时间：每年1月10日</p>
                    <p>1.全省范围内从乡（镇）起，逐级全面统计，由县级填报经州（市）审核后上报。</p>
                    <p>2.蔬菜占地面积=常年蔬菜占地面积+夏秋蔬菜占地面积+冬春蔬菜占地面积，均不含复种指数，指种植蔬菜的土地面积；蔬菜占地面积≤蔬菜年播种面积。 </p>
                    <p>3.菜地喷滴灌面积，指固定的喷灌以及可移动性的滴灌使用面积。</p>
                    <span slot="desc"></span>
                </Alert>
            </Col>
        </Row>
    </div>
</template>
<script>
export default {
    data() {
        const validateData = (rule, value, callback) => {
            var temp = /^[0-9]\d*(\.\d+)?$/;
            if (value != null && value != "") {
                if (temp.test(value) == false) {
                    callback(new Error('必须是大于0的数字'));
                }
                else {
                    callback();
                }
            } else {
                callback();
            }
        };
        return {
            self: this,
            CreateYearList: this.GetGroupDict("ReportYear"), //年度
            CurrentYear: this.GetCurrentYear(),//当前年度
            SearchYear: [],
            BtnSaveStatus: false,//保存按钮开关
            BtnUpStatus: false,//上报按钮开关
            isFull:false,
            DataModel: {//当年数据
                Id: '',
                ReportId: '',
                VegArea: this.VegArea,
                PerennialArea: '',
                SeasonArea: '',
                WSArea: '',
                SFArea: '',
                LiquidArea: '',
                FacilityArea: '',
                Remark: '',
                ReportStatus: '',
                OldId: '',
                OldReportId: '',
                OldVegArea: this.OldVegArea,
                OldPerennialArea: '',
                OldSeasonArea: '',
                OldWSArea: '',
                OldSFArea: '',
                OldLiquidArea: '',
                OldFacilityArea: '',
                OldRemark: '',
                OldReportStatus: ''
            },
            ruleModel: {//验证规则
                PerennialArea: [{ validator: validateData, trigger: 'blur' }],
                SeasonArea: [{ validator: validateData, trigger: 'blur' }],
                WSArea: [{ validator: validateData, trigger: 'blur' }],
                SFArea: [{ validator: validateData, trigger: 'blur' }],
                LiquidArea: [{ validator: validateData, trigger: 'blur' }],
                FacilityArea: [{ validator: validateData, trigger: 'blur' }]
            },
            //查询模型：根据需求删除不不要查询条件
            //蔬菜生产情况表代码
            searchModel: {
                Id: '',
                ReportCode: 'VegBasicInfo',
                FillInYear: '',
                TimesType: '',
                AreaCode: this.GetlocaStorage("VegUserInfo").AreaCode,
                PageNumber: 1,
                PageSize: 20,
                Status: '',
                Opinion: ''
            }
        }
    },
    computed: { //菜地总面积
        // SeasonArea: {//季节性面积
        //     get: function () {
        //         var WSArea = this.DataModel.WSArea == null ? '' : Number(this.DataModel.WSArea);
        //         var SFArea = this.DataModel.SFArea == null ? '' : Number(this.DataModel.SFArea);
        //         return WSArea + SFArea;
        //     }
        // },
        VegArea: {
            get: function () {//蔬菜总面积
                var PerennialArea = this.DataModel.PerennialArea == null ? 0 : Number(this.DataModel.PerennialArea);
                //季节性蔬菜总面积
                // var SeasonArea = this.DataModel.SeasonArea == null ? '' : Number(this.DataModel.SeasonArea);
                var WSArea = this.DataModel.WSArea == null ? 0 : Number(this.DataModel.WSArea);
                var SFArea = this.DataModel.SFArea == null ? 0: Number(this.DataModel.SFArea);
                var total=Math.round((PerennialArea + WSArea + SFArea)*100)/100 ;
                //水生蔬菜面积
                // var LiquidArea = this.DataModel.LiquidArea == null ? '' : Number(this.DataModel.LiquidArea);
                return  total;
            }
        },
        OldVegArea: {
            get: function () {//蔬菜总面积
                var PerennialArea = this.DataModel.OldPerennialArea == null ? '' : Number(this.DataModel.OldPerennialArea);
                //季节性蔬菜总面积
                // var SeasonArea = this.DataModel.SeasonArea == null ? '' : Number(this.DataModel.SeasonArea);
                var WSArea = this.DataModel.OldWSArea == null ? '' : Number(this.DataModel.OldWSArea);
                var SFArea = this.DataModel.OldSFArea == null ? '' : Number(this.DataModel.OldSFArea);
                var total=(Math.round((PerennialArea + WSArea + SFArea)*100)/100).toFixed(1) ;
                //水生蔬菜面积
                // var LiquidArea = this.DataModel.LiquidArea == null ? '' : Number(this.DataModel.LiquidArea);
                return total ;
            }
        }
    },
    methods: {
        checkData: function () {
            var VegArea = this.DataModel.VegArea == null ? '' : Number(this.DataModel.VegArea);//蔬菜总面积
            var PerennialArea = this.DataModel.PerennialArea == null ? '' : Number(this.DataModel.PerennialArea);
            var SeasonArea = this.DataModel.SeasonArea == null ? '' : Number(this.DataModel.SeasonArea);
            var LiquidArea = this.DataModel.LiquidArea == null ? '' : Number(this.DataModel.LiquidArea);
            var VegTotal = PerennialArea + SeasonArea + LiquidArea;
            if (VegArea == VegTotal) {

            }
        },
        GetData: function () {
            var self = this;
            var model = new Object();
            model.ReportCode = self.searchModel.ReportCode;
            if (self.searchModel.FillInYear != null && self.searchModel.FillInYear != '') {
                self.isFull= self.IsFillForTableYear(parseInt(self.searchModel.FillInYear));
                model.FillInYear = self.searchModel.FillInYear;
            } else {
                self.isFull= self.IsFillForTableYear(self.CurrentYear);   
                model.FillInYear = self.CurrentYear + '年';//填报年度-----数据字典值
                self.searchModel.FillInYear = self.CurrentYear + '年';
            }
            model.AreaCode = self.searchModel.AreaCode;
            self.DataModel = {};//清空当前数据            
            self.$http.post("Report/PostData", model).then( //获取数据编辑项的值
                function (res) {
                    if (res.data.list.status == 2 || res.data.list.status == 1) {
                        self.DataModel = res.data.list.model;
                        self.BtnSaveStatus = true;
                    } else {
                        self.DataModel = res.data.list.model;
                        self.$Modal.warning({
                            title: "提示信息",
                            content: res.data.list.message
                        });
                        self.BtnSaveStatus = false;
                    }
                }
            );
        },
        //保存方法
        save(name) {
            var self = this;
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$http.put('VegBasicInfo', self.DataModel).then(
                        function (res) {
                            if (res.data.status == 1) {
                                self.GetData();
                                self.$Notice.success({
                                    title: '数据保存成功！',
                                    desc: false
                                });
                            } else {
                                self.$Modal.warning({
                                    title: "提示信息",
                                    content: "数据保存失败,请与管理员联系!"
                                });
                            }
                        });
                }
                else {
                    this.$Message.error('数据验证失败，请检查后再试!');
                }
            });
        },
        //数据上报
        DataUp: function () {
            var self = this;
            self.searchModel.Id = self.DataModel.ReportId;
            self.searchModel.Status = 3;
            self.searchModel.Opinion = '';
            self.$Modal.confirm({
                title: '提示信息',
                content: '<p>数据上报后，不能再更改，是否继续上报？</p>',
                onOk: () => {
                    self.$http.post('Report/PostUpStatus', self.searchModel).then(function (res) {
                        if (res.data.status === 1) {
                            self.$Notice.success({
                                title: '数据上报成功',
                                desc: false
                            });
                            self.GetData();
                        } else {
                            self.$Notice.success({
                                title: '数据上报失败',
                                desc: res.data.messages
                            });
                        }
                    });
                },
                onCancel: () => { }
            });
        },
        //模板下载
        TmpDown: function () {
            window.open(this.$http.defaults.baseURL + "Report/GetTemplateData?ReportCode="+this.searchModel.ReportCode);
        },
        //导出
        ExcelDown:function(){
            var self = this;
            var model = new Object();
            model.ReportCode = self.searchModel.ReportCode;
            if (self.searchModel.FillInYear != null && self.searchModel.FillInYear != '') {
                model.FillInYear = self.searchModel.FillInYear;
            } else {
                model.FillInYear = self.CurrentYear + '年';//填报年度-----数据字典值
                self.searchModel.FillInYear = self.CurrentYear + '年';
            }
            model.AreaCode = self.searchModel.AreaCode;
            window.open(this.$http.defaults.baseURL + "VegBasicInfo/GetExcelData?ReportCode=" + model.ReportCode+"&&FillInYear="+model.FillInYear+"&&AreaCode="+model.AreaCode);
        },
        //导入
        GetPostUrl(){
           var url= this.$http.defaults.baseURL + "Report/PostImportData?ReportCode="+this.searchModel.ReportCode+"&&AreaCode="+this.searchModel.AreaCode + "&&FillInYear=" + this.searchModel.FillInYear;
           return url;
        },
        handleSuccess(res, file) {
            var self = this;
            self.GetData();
            self.$Notice.success({
                title: '数据导入成功！',
                desc: false
            });
        },
    },
    //创建Vue页面方法
    created: function () {
        //创业Vue前调用获取this.datas: {},//table数据对象
        this.GetData();//获取当年的数据
    },
    watch: {
        //需要监听的在此处新增监听对象
    }
}
</script>